import { Text, View } from '@tarojs/components'
import React from 'react'
import { THEME_COLORS } from '../../constants'
import Card from '../card'
import './index.less'

export interface SelectionSectionProps {
  /** 标题 */
  title: string
  /** 是否显示修改按钮 */
  showModify?: boolean
  /** 修改按钮文本 */
  modifyText?: string
  /** 修改按钮点击回调 */
  onModify?: () => void
  /** 内容区域 */
  children: React.ReactNode
  /** 自定义类名 */
  className?: string
  /** 主题色 */
  primaryColor?: string
  /** Card 组件的 padding */
  cardPadding?: 'none' | 'sm' | 'md' | 'lg'
  /** Card 组件的圆角 */
  cardRounded?: 'none' | 'sm' | 'md' | 'lg'
  /** Card 组件的阴影 */
  cardShadow?: 'none' | 'sm' | 'md' | 'lg'
  /** 是否使用 Card 包裹 */
  useCard?: boolean
}

/**
 * SelectionSection 选择区块组件
 * 用于统一管理选择区块的外观和行为
 */
const SelectionSection: React.FC<SelectionSectionProps> = ({
  title,
  showModify = true,
  modifyText = '去修改',
  onModify,
  children,
  className = '',
  primaryColor = THEME_COLORS.primary,
  cardPadding = 'md',
  cardRounded = 'lg',
  cardShadow = 'sm',
  useCard = true,
}) => {
  return (
    <View className={`selection-section ${className}`}>
      {/* Header */}
      <View className='section-header'>
        <Text className='section-title'>{title}</Text>
        {showModify && onModify && (
          <View style={{ color: primaryColor }} className='modify-button' onClick={onModify}>
            <Text>{modifyText}</Text>
            <Text className='chevron-icon'>›</Text>
          </View>
        )}
      </View>

      {/* Content */}
      {useCard ? (
        <Card padding={cardPadding} rounded={cardRounded} shadow={cardShadow}>
          {children}
        </Card>
      ) : (
        children
      )}
    </View>
  )
}

export default SelectionSection
